<!-- 异常提醒 -->
<template>
<div class="warning-wp">
  <el-form ref="form" :inline="true" :model="form" size="small" class="this-form">
    <el-form-item label="选择日期">
      <el-date-picker class="w1"
        v-model="form.a"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="提醒类型">
      <el-select class="w1" v-model="form.b" placeholder="请选择">
        <el-option
          v-for="(item, index) in stateList"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="backRouter()">返回</el-button>
    </el-form-item>
  </el-form>

  <div class="c-flex">
    <div class="c-flex-1">
      <el-table
        :data="table.data"
        border
        :show-header="false">
        <el-table-column align="center" width="100">
          <img src="~@h/assets/image/finger.png"/>
        </el-table-column>
        <el-table-column v-for="(item, index) in table.head" :key="index"
          :prop="item.key"
          :label="item.label"
          :width="item.width"
          :align="item.align">
          <span slot-scope="scope" :style="{color: item.color}">{{scope.row[item.key]}}</span>
        </el-table-column>
      </el-table>
    </div>
    <div class="seting-box">
      <span class="more-btn">更多</span>
      <div class="group">
        <div class="title">我需要短信提醒</div>
        <el-checkbox v-for="(item, index) in need.note" :key="index"
          v-model="item.check"
          class="item">{{item.label}}</el-checkbox>
      </div>
      <div class="group">
        <div class="title">我需要微信提醒</div>
        <el-checkbox v-for="(item, index) in need.wx" :key="index"
          v-model="item.check"
          class="item">{{item.label}}</el-checkbox>
      </div>
    </div>
  </div>

</div>
</template>
<script>
export default {
  name: 'warning',
  data () {
    return {
      form: {
        a: '',
        b: ''
      },
      stateList: [
        {label: '连接中', value: '1'},
        {label: '会诊中', value: '2'},
        {label: '已完成', value: '3'}
      ],

      // 异常提醒设置
      need: {
        note: [
          {label: '数据上传异常提醒', check: false},
          {label: '指标异常提醒', check: false},
        ],
        wx: [
          {label: '数据上传异常提醒', check: false},
          {label: '指标异常提醒', check: false},
        ]
      },

      table: {
        head: [
          {label: '类型', key: 'a', align: 'center', width: 200, color: '#D84219'},
          {label: '文本', key: 'b'},
          {label: '时间', key: 'c', align: 'center', width: 200},
        ],
        data: [
          {a: '【数据上传异常提醒】', b: '数据接入异常，上传数据量为0！', c: '2022-02-21 16:11:13'},
          {a: '【数据上传异常提醒】', b: '数据接入异常，医院前置机连接不上！ ', c: '2022-02-21 15:01:20'},
          {a: '【数据上传异常提醒】', b: '数据接入异常，表数量过低！', c: '2022-02-21 12:11:13'},
          {a: '【数据上传异常提醒】', b: '数据接入异常，医院上传数据量过低！', c: '2022-01-21 12:05:58'},
          {a: '【指标异常提醒】', b: ' 住院收入指标值为12425，与标准值10000差异较大！', c: '2022-02-21 12:05:47'},
          {a: '【指标异常提醒】', b: '门诊收入指标值为37892，与标准值10000差异较大！', c: '2022-02-21 12:02:05'},
          {a: '【指标异常提醒】', b: '接诊人次指标值为6412，与标准值5000差异较大！', c: '2022-02-21 12:01:00'},
        ]
      }
    }
  },
  mounted () {

  },
  methods: {
    search () {

    },

    backRouter () {
      this.$router.back();
    }
  }
}
</script>
<style lang="scss" scoped>
.warning-wp {
  .this-form {
    padding: 0 0 22px;
  }
  .seting-box {
    position: relative;
    margin-left: 20px;
    flex: 0 0 250px;
    height: 380px;
    background: #fff;
    border: 1px solid #E4E4E4;
    .more-btn {
      position: absolute;
      top: 24px;
      right: 20px;
      cursor: pointer;
    }
    .group {
      padding: 20px 20px 0;
      .title {
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: 600;
      }
      .item {
        margin-bottom: 10px;
      }
    }
  }
}
</style>